导航菜单
首页 >  NFC 标签打开小程序 微信开放文档  > 微信小程序接入NFC,使用HCE模拟主机卡完成NFC刷卡发送消息

微信小程序接入NFC,使用HCE模拟主机卡完成NFC刷卡发送消息

NFC相信大家都很熟悉,现实中经常使用的门禁卡,公交卡,地铁卡,饭卡等都是采用NFC功能,那么你知道吗,NFC也可以用微信小程序来实现。使用微信小程序可以读取/写入让手机成为一个刷卡器,也可以使用微信小程序模拟一个主机卡,来刷开门禁/饭卡等等。本章就带大家来一起看看微信小程序的NFC有何不同!

一、什么是NFC

NFC是一种采用13.56MHz频带的近距离无线通讯技术,虽然通讯距离仅为10cm左右,不过和非接触式IC卡技术一样,我们只需要“触碰一下”即可在不同的电子产品之间交换数据。

与非接触IC卡不同,NFC与非接触式IC卡不同,NFC可进行双向通信。只要是支持NFC的产品和IC卡,就可以读出或写入数据。还可在手机等便携产品间进行通信。数据传输速度不高,有106kbit/秒、212kbit/秒、424kbit/秒以及848kbit/秒四种速度可供选择。

NFC介绍

二、NFC可以做什么

NFC具有“卡模拟”、“读写器模拟”以及“产品间通信(P2P)”三种功能。

1. 卡模拟:举例来说,我们可以用手机来模拟门禁卡,公交卡,饭卡等等。但是要注意的是,它是模拟出来的,也就是说并不实体存在的一个卡。

2. 读写器模拟:指的就是,你可以模拟一个读写器,别人用NFC卡来你这里刷卡,你就可以获取其卡片上的信息。

3. 通讯讲就是数据通信,使用NFC卡在刷的时候都会进行数据交换。用来做一些事情,比如:配置网络,设置信息,传输文件等等。

三、微信小程序的NFC

NFC | 微信开放文档

我们打开文档可以看到,对于NFC,微信给它的名字叫:近场通讯

首先一定要强调的是,因为苹果手机权限的缘故,所以NFC在微信小程序中只支持:Android

微信将NFC分为了三部分

HCE(基于主机的卡模拟),也就是将安卓手机模拟成实体的智能卡。我们可以通过模拟的智能卡来刷对应的读卡器,给读卡器传递数据。支持NFC读写,也就是将手机作为读卡器来使用。也就是我们可以将一些实体的NFC卡通过贴在手机上从而实现读取卡内容。NFC标签打开小程序。指的就是我们可以通过NFC卡片触碰手机,快速唤起小程序页面的能力。

1. HCE(基于主机的卡模拟)的使用场景:

使用手机做门禁卡/公交卡/地铁卡使用手机给读卡器传递数据(配网、登记)

2. NFC读写的使用场景:

使用手机做刷卡器,来获取NFC卡的信息。

3. NFC标签打开小程序的使用场景

设备的快速配网文件快速传输等快捷控制官网文档写的也很齐全了,大家可以根据自己的需求选择不同的场景来进行使用。

本章我就选择了HCE(基于主机的卡模拟)场景。

四、使用步骤

1.研究API

微信官方文档中,卡模拟一共有六个API。

分别为:

wx.stopHCE 关闭NFC模块。

wx.startHCE 初始化NFC

wx.sendHCEMessage 发送NFC消息

wx.onHCEMessage  监听接收NFC设备消息事件。

wx.offHCEMessage  移除接收 NFC 设备消息事件的监听函数

wx.getHCEState 判断当前设备是否支持 HCE 能力。

再次特别要强调的是,NFC仅在Android系统下支持。

2.使用方法有过开发经验的同学其实比较清楚。

以上API 很明显就是一个生命周期。

从开始到销毁。我们该如何去操作这个NFCapi呢?

1. 首先调用 wx.getHCEState, 判断设备是否支持NFC

2. 调用 wx.startHCE(OBJECT) 初始化手机的NFC模块;

3. 初始化完成后,调用 wx.onHCEMessage 监听芯片响应的消息;

4. 点击页面上的“询卡”按钮,调用 wx.sendHCEMessage发送询卡指令;

5. 这时 wx.onHCEMessage(应该可以收到带有uid信息的芯片响应数据;

6. 业务处理。

7.  全部操作完成后之后,调用 wx.stopHCE停止手机的NFC模块

好了,废话不多说,直接进入我们的正式项目。

一:新项目

我们需要利用微信开发者工具,来新建一个我们的项目。APPID大家如果有的话就用自己的,没有的话则使用测试号即可。

二:设置简单页面及对应的js

三:根据上述我们理清的 NFC生命周期顺序来搭建我们的NFC项目。

顺序自然为:页面打开初始化的时候就需要 getHCEState 判断设备是否支持NFC。不支持则需要做兼容。

当返回值的errCode为 0  的时候则一切正常,是支持NFC的。

同时,为了更有效的避免大家判断code,所以我们可以将官网的 getHCEState返回code

相关推荐: